<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}

import { onMounted, ref, defineEmits, defineProps } from 'vue';
const { text, isDisabled, style, className, bgColor } = defineProps({
    text: {
        type: String,
        default: () => '确定'
    },
    style: {
        type: Object,
        default: () => ({}),
    },
    isDisabled: {
        type: Boolean,
        default: () => false
    },
    className: {
        type: String,
        default: () => ''
    },
    bgColor: {
        type: String,
        default: () => 'linear-gradient(to right, #00DE8D 0%, #00BD78 100%)'
    }
});
/**
 * @property 变量
 */

const emits = defineEmits(['click'])

/**
 * @property  所有请求以api开头 如:apiDataInfo
 * / 


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */const clickConfim = () => {
    if (isDisabled) return;
    emits('click');
}


/**
 * @property 内置方法
 */


</script>
<template>
    <div class="but font-size-24 text-align-center fc b-rd-2" :class="className" @click="clickConfim" :style="{
        ...style,
        background: style.background ? style.background : isDisabled ? '#7EE0BD' : bgColor
    }">
        {{ text }}
    </div>
</template>
<style lang="scss" scoped>
.but {
    width: 100%;
    height: 100%;
    color: #fff;
}
</style>